<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 继承
    // 让一个类(构造函数) 继承 另一个类(构造函数) 的属性和方法(实例化对象和原型对象),同时还可以重新定义追加自己的方法
    // 继承的类 => 子类
    // 被继承的类 => 父类

    // 继承的目的: 实现代码中属性和方法的复用,提高编程效率


    // 原型对象继承: 
    // 目的:用父类的实例化对象覆盖子类的原型对象 -> 拓宽原型链 => 继承父类原型对象的属性和方法
    // 缺点:不能继承父类实例化对象的属性和方法



    // 父类
    function Person(name, age) {
        // this -> 构造函数Person在执行过程中创建的是实例化对象
        this.name = name;
        this.age = age;
    }
    Person.prototype.species = "human";
    Person.prototype.skill = function () {
        console.log("thinking");
    }
    Person.prototype.say = function () {
        console.log(this.name, this.age);
    }
    // p的原型链: p -> Person.prototype -> Object.prototype -> null
    var p = new Person("张三", 18);

    // 子类
    function YellowPerson(name, age, hobby) {
        // this -> 构造函数YellowPerson在执行过程中创建的是实例化对象 (obj)
        // Person.call(this, name, age);  //调用父类构造函数,强制将this指向子类在在执行过程中创建的是实例化对象
        this.hobby = hobby;
    }

    // 为什么yp无法访问Person.prototype上的属性和方法? 
    // 分析 => yp的原型链上没有Person.prototype => 如何让yp的原型链上存在Person.prototype
    // p的原型链:   p -> Person.prototype -> Object.prototype -> null
    // yp的原型链: yp -> YellowPerson.prototype -> Object.prototype -> null

    // 方法2:  用父类的实例化对象覆盖子类的原型对象 -> 拓宽原型链
    // 结果:
    // p的原型链:   p -> Person.prototype -> Object.prototype -> null
    // yp的原型链: yp -> YellowPerson.prototype(p父类的实例化对象)-> Person.prototype -> Object.prototype -> null
    // 缺点: 由于使用父类的实例化对象覆盖子类的原型对象 => 出现多余属性

    YellowPerson.prototype = new Person("张三", 18);
    YellowPerson.prototype.constructor = YellowPerson;

    // YellowPerson.prototype = new Person("张三", 18) -> {
    //     name:"张三",
    //     age:18,
    //     constructor:YellowPerson,
    //     [[Prototype]]:Person.prototype
    // }

    YellowPerson.prototype.speak = function () {
        console.log("chinese");
    }

    // yp的原型链: yp -> YellowPerson.prototype -> Object.prototype -> null
    var yp = new YellowPerson("张三", 18, "睡觉");
    console.log(yp);


</script>

</html>